<!doctype html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>照片_陈恢严个人博客</title>
  <meta name="keywords" content="博客,个人博客,陈,陈陈,陈陈陈,陈恢严,恢严,陈恢严个人博客,个人,个人相册,我的相册,相册" />
  <meta name="description" content="陈恢严个人博客，是一个主学JAVA后端语言、记录开发中遇到的技术难点、并专注于个人生活的博客。" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="/asset/images/favicon.ico" type="image/x-icon">
  <link href="/asset/css/base.css" rel="stylesheet">
  <link href="/asset/layui/css/layui.css" rel="stylesheet">
  <script src="/asset/js/jquery.min.js" type="text/javascript"></script>
  <link href="/asset/css/loading.css" rel="stylesheet">
  <script type="text/javascript" src="/asset/js/comm.js"></script>
  <script type="text/javascript" src="/asset/layui/layui.js"></script>
  <script type="text/javascript" src="/asset/js/vue.min.js"></script>
  <script src="/asset/js/piccontent.min.js" type="text/javascript"></script>
  <!-- 评论插件start -->
  <link rel="stylesheet" type="text/css" href="/asset/commpluing/css/main.css" />
  <link rel="stylesheet" type="text/css" href="/asset/commpluing/css/sinaFaceAndEffec.css" />
  <script type="text/javascript" src="/asset/commpluing/js/main.js"></script>
  <script type="text/javascript" src="/asset/commpluing/js/sinaFaceAndEffec.js"></script>
  <!-- 评论插件end -->
  <!--[if lt IE 9]>
  <script src="/asset/js/modernizr.js"></script>
  <![endif]-->
  <script src="/asset/js/scrollReveal.js"></script>
  <style>
    nav ul li a[href='/myAlbum']{color: #f7ffb4; /*background: #176c86;*/
      background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: -webkit-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: -moz-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: -ms-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: -o-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background: -webkit-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background: -moz-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background: -ms-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background: -o-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
    }
    .layui-form-switch{ margin-top: 0 !important;}
  </style>
</head>
<body>
<div class="box-bg">
  <div class="stars"></div>  <!--背景层，不要删除，不然没有作用-->
</div>
  <div id="photoVue">
    <header>
      <div class="profile">
        <div class="avatar fl"><img src="/asset/images/avatar.jpg"></div>
        <div class="guanzhu fl">
          <ul>
            <li><img src="/asset/images/nianling.png"><span>生日：1997-01-26</span></li>
            <li><img src="/asset/images/weizhi.png"><span>中国·广东·湛江</span></li>
            <li><img src="/asset/images/qq.png"><span>QQ：879532354</span></li>
            <li><img src="/asset/images/weixin.png"><span><img src="/asset/images/wx.jpg"></span></li>
          </ul>
        </div>

        <!-- 加载提示start -->
        <div class="loading-div" v-if="!isLoad_1">
          <div class="loader">
            <div>正</div><div>在</div><div>努</div><div>力</div><div>加</div><div>载</div><div>中</div><div></div><div></div><div></div>
          </div>
        </div>
        <!-- 加载提示end -->

        <!-- 标题 -->
        <div class="username" v-html="logoTitle.content"></div>
      </div>

      <!-- 菜单start -->
      <nav>
        <ul id="starlist">
          <li v-for="(item, index) in sysMenuList" :key="item.id">
            <a v-if="item.href != '/blogSpace'" v-bind:href="item.href" v-text="item.name"></a>
            <a v-if="item.href == '/blogSpace'" href="javascript:void(0)" onclick="window.parent.myspace()" v-text="item.name"></a>
          </li>
        </ul>
      </nav>
      <!-- 菜单end -->
    </header>
    <article>
      <div class="picsbox">
        <div class="bodymodal"></div>
        <!--播放到第一张图的提示-->
        <div class="firsttop">
          <div class="firsttop_right">
            <div class="close2"> <a class="closebtn1" title="关闭" href="javascript:void(0)">X</a> </div>
            <div class="replay">
              <h2 id="div-end-h2"> 已到第一张图片了。 </h2>
              <p> <a class="replaybtn1" href="javascript:;">重新播放</a> </p>
            </div>
          </div>
        </div>
        <!--播放到最后一张图的提示-->
        <div class="endtop">
          <div class="firsttop_right">
            <div class="close2"> <a class="closebtn2" title="关闭" href="javascript:void(0)">X</a> </div>
            <div class="replay">
              <h2 id="H1"> 已到最后一张图片了。 </h2>
              <p> <a class="replaybtn2" href="javascript:;">重新播放</a> </p>
            </div>
          </div>
        </div>
        <!--弹出层结束-->
        <!--图片特效内容开始-->
        <div class="piccontext">
          <h2 v-text="photoAlbum.name"></h2>
          <div class="source">
            <div class="source_left">
              <span v-text="photoAlbum.type == 0? '照片' : '视频'"></span>
              <span v-text="photoAlbum.createDateValue"></span>
              <span v-text="photoAlbum.readNum + '人已阅读'"></span>
            </div>
            <div class="source_right"> <a href="javascript:;" class="list">列表查看</a> </div>
            <div class="source_right1"> <a href="javascript:;" class="gaoqing">高清查看</a> </div>
          </div>
          <!--大图展示-->
          <div class="picshow">
            <div class="picshowtop">
              <a href="#">
                <img src="" alt="" id="pic1" curindex="0" />
              </a>
              <a id="preArrow" href="javascript:void(0)" class="contextDiv" title="上一张">
                <span id="preArrow_A"></span>
              </a>
              <a id="nextArrow" href="javascript:void(0)" class="contextDiv" title="下一张">
                <span id="nextArrow_A"></span>
              </a>
            </div>
            <div class="picshowtxt">
              <div class="picshowtxt_left">
                <span class="initPhotoIndex">1</span>/
                <i v-text="photoList.length"></i>
              </div>
            </div>
            <div class="picshowlist">
              <div class="picshowlist_mid">
                <div class="picmidleft">
                  <a href="javascript:void(0)" id="preArrow_B">
                    <span class="sleft"></span>
                  </a>
                </div>
                <div class="picmidmid">
                  <ul>
                    <li v-for="(item, index) in photoList" :key="item.id">
                      <a href="javascript:void(0);">
                        <img v-bind:src="'/photo_img/' + item.thumUrl" text="" v-bind:bigimg="'/photo_img/' + item.thumUrl" v-bind:alt="item.thumUrl"/>
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="picmidright">
                  <a href="javascript:void(0)" id="nextArrow_B">
                    <span class="sright"></span>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!--列表展示-->
          <div class="piclistshow">
            <ul>
              <li v-for="(item, index) in photoList" :key="item.id">
                <div class="picimg">
                  <img v-bind:src="'/photo_img/' + item.thumUrl" />
                </div>
              </li>
            </ul>
          </div>

        </div>
        <div class="picjianjie" v-text="photoAlbum.content"></div>

        <!-- 加载提示start -->
        <div class="loading-div" v-if="!isLoad_3">
          <div class="loader">
            <div>正</div><div>在</div><div>努</div><div>力</div><div>加</div><div>载</div><div>中</div><div></div><div></div><div></div>
          </div>
        </div>
        <!-- 加载提示end -->

        <!-- 分页 -->
        <div class="pagelist" id="photoPageContent"></div>

        <p class="diggit" v-on:click="clickPraise">很赞哦！(<b id="diggnum" v-text="photoAlbum.praiseNum"></b>)</p>
        <!-- 评论start -->
        <div class="news_pl">
          <h2>相册评论</h2>
          <div class="gbko">
            <div class="comment-content">
              <div class="cont-box">
                <textarea class="text" id="pl-comment" v-model="commForm.content" placeholder="写下你想说的，开始我们的对话"></textarea>
                <div class="tools-box">
                  <div class="operator-box-btn">
                    <span class="face-icon layui-icon layui-icon-face-surprised" title="表情"></span>
                    <span class="img-icon layui-icon layui-icon-picture" title="插入图片"></span>
                  </div>                  <div class="username">
                    <i class="layui-icon"></i>
                    <input type="text" id="pl-username" v-model="commForm.userName" class="pl-key" size="15" placeholder="你的昵称" value="">
                  </div>
                  <div class="submit-btn" v-on:click="submitComment"><input type="button" value="发布" /></div>
                </div>
              </div>
              <div class="clear-float"></div>
              <p style="margin-top: 20px; height: 30px;">
                <span><strong style="color:#f90;" v-text="count"></strong>条留言</span>
                <span><strong style="color:#f90;" v-text="referCount"></strong>条回复</span>
                <span class="layui-form" style="float: right;">
                    <input type="checkbox" id="isFuAdminSwitch" lay-filter="isFuAdminSwitch" lay-skin="switch" lay-text="验证通过|副博主认证">
                      <input type="checkbox" id="isAdminSwitch" lay-filter="isAdminSwitch" lay-skin="switch" lay-text="验证通过|博主认证">
                  </span>
              </p>
            </div>
            <div id="info-show">
              <ul>
                <li v-for="(item, index) in commList" :key="item.id">
                  <div class="head-face">
                    <img v-bind:src="'/asset/images/commhead/' + item.headPhoto">
                    <div class="clear-float"></div>
                    <strong class="head-index" v-text="getIndex(index) + '楼'"></strong>
                  </div>
                  <div class="reply-cont">
                    <p v-if="item.isAdmin == 0" v-text="item.userName"></p><!-- 游客 -->
                    <p v-if="item.isAdmin == 1"><span v-html="item.userName" style='color:#ff37d5'></span></p><!-- 副博主 -->
                    <p v-if="item.isAdmin == 2"><span v-html="item.userName" style='color:#FF5722'></span></p><!-- 博主 -->
                    <p class="comment-body" v-html="analyticEmotion(item.content)"></p>
                    <p class="comment-footer">
                      <span v-text="timeago(item.time)"></span>
                      <a href="#pl-comment" class="reply-btn" v-on:click="reply(item.id, item.userName, item.content)">回复</a>
                      <a href="javascript:void(0)" class="reply-btn" v-on:click="commPraise(item.id)" v-text="'点赞(' + item.praise + ')'"></a>
                    </p>
                    <!-- 回复模块start -->
                    <div class="reply-reply-cont" v-for="(childItem, childIndex) in item.childList" :key="childItem.id">
                      <div class="head-face">
                        <img v-bind:src="'/asset/images/commhead/' + childItem.headPhoto">
                      </div>
                      <p v-if="childItem.isAdmin == 0" class="by-user-name" v-text="childItem.byUserName + ' @ ' + childItem.userName"></p><!-- 游客 -->
                      <p v-if="childItem.isAdmin == 1" class="by-user-name">
                        <span v-html="childItem.byUserName" style='color:#ff37d5'></span>
                        <span v-text="' @ ' + childItem.userName"></span>
                      </p><!-- 副博主 -->
                      <p v-if="childItem.isAdmin == 2" class="by-user-name">
                        <span v-html="childItem.byUserName" style='color:#FF5722'></span>
                        <span v-text="' @ ' + childItem.userName"></span>
                      </p><!-- 博主 -->
                      <p class="comment-body refer-content" v-html="'引用：' + analyticEmotion(childItem.referContent)"></p>
                      <p class="comment-body" v-html="analyticEmotion(childItem.content)"></p>
                      <p class="comment-footer">
                        <span v-text="timeago(childItem.time)"></span>
                        <a href="#pl-comment" class="reply-btn" v-on:click="reply(childItem.parentId, childItem.byUserName, childItem.content)">回复</a>
                        <a href="javascript:void(0)" class="reply-btn" v-on:click="commPraise(childItem.id)" v-text="'点赞(' + childItem.praise + ')'"></a>
                      </p>
                    </div>
                    <!-- 回复模块end -->
                  </div>
                </li>
              </ul>
            </div>
            <div class="clear-float"></div>
          </div>

          <!-- 加载提示start -->
          <div class="loading-div" v-if="!isLoad_2">
            <div class="loader">
              <div>正</div><div>在</div><div>努</div><div>力</div><div>加</div><div>载</div><div>中</div><div></div><div></div><div></div>
            </div>
          </div>
          <!-- 加载提示end -->

          <!-- 分页 -->
          <div class="pagelist" id="pageContent"></div>
        </div>
        <!-- 评论end -->
      </div>
      <div class="blank"></div>
    </article>
    <footer>
      <p v-html="indexFooter.content"></p>
    </footer>
    <a href="#" class="cd-top">Top</a>
  </div>
</body>
<script>

  //初始化layui模块
  layui.use(['layer', 'form'], function(){
    var layer = layui.layer;
    var form = layui.form;

    //监听身份验证开关
    form.on('switch(isAdminSwitch)', function(data){
      if(data.elem.checked){
        var index = layer.open({
          title: '博主身份验证',
          type: 1,
          shade: 0.2,
          maxmin:false,
          shadeClose: false,
          btn: ['确定', '取消'],
          area: ['250px','150px'], //宽高
          content: '<input type="password" id="adminKey" placeholder="请输入口令" autofocus autocomplete="off" class="layui-input">',
          yes: function(index, layero){
            var adminKey = $("#adminKey").val();
            if(adminKey == '' || adminKey == null || adminKey == undefined){
              layer.msg("请输入口令", {icon:2});
              return;
            }
            var loadIndex = layer.load(2); //加载提示
            $.ajax({
              type: 'POST',
              url: '/aboutMe/validAdmin',
              data: {
                adminKey: adminKey
              },
              dataType: 'JSON',
              success: function(data){
                layer.close(loadIndex); //关闭加载提示
                layer.close(index); //关闭加载提示
                if(data.state == "200"){
                  layer.msg(data.message, {icon:1});
                  photoVue.commForm.isAdmin = 2; //修改身份为博主
                }else{
                  layer.msg(data.message, {icon:2});
                  $("#isAdminSwitch").removeAttr("checked"); //验证失败去除勾选
                  photoVue.commForm.isAdmin = 0; //修改身份为游客
                }
                form.render();
              },
              error: function(error){
                layer.close(loadIndex); //关闭加载提示
                layer.msg(error, {icon:2});
                $("#isAdminSwitch").removeAttr("checked"); //验证失败去除勾选
                photoVue.commForm.isAdmin = 0; //修改身份为游客
                form.render();
              }
            })
          },
          btn2: function(index, layero){
            layer.close(index);
            $("#isAdminSwitch").removeAttr("checked"); //验证失败去除勾选
            photoVue.commForm.isAdmin = 0; //修改身份为游客
            form.render();
          },
          cancel: function(index, layero){
            layer.close(index);
            $("#isAdminSwitch").removeAttr("checked"); //验证失败去除勾选
            photoVue.commForm.isAdmin = 0; //修改身份为游客
            form.render();
          }
        });
      }else{
        photoVue.commForm.isAdmin = 0; //修改身份为游客
        form.render();
      }
    });
    //监听副博主身份验证开关
    form.on('switch(isFuAdminSwitch)', function(data){
      if(data.elem.checked){
        var index = layer.open({
          title: '副博主身份验证',
          type: 1,
          shade: 0.2,
          maxmin:false,
          shadeClose: false,
          btn: ['确定', '取消'],
          area: ['250px','150px'], //宽高
          content: '<input type="password" id="fuAdminKey" placeholder="请输入口令" autofocus autocomplete="off" class="layui-input">',
          yes: function(index, layero){
            var adminKey = $("#fuAdminKey").val();
            if(adminKey == '' || adminKey == null || adminKey == undefined){
              layer.msg("请输入口令", {icon:2});
              return;
            }
            var loadIndex = layer.load(2); //加载提示
            $.ajax({
              type: 'POST',
              url: '/aboutMe/validFuAdmin',
              data: {
                adminKey: adminKey
              },
              dataType: 'JSON',
              success: function(data){
                layer.close(loadIndex); //关闭加载提示
                layer.close(index); //关闭加载提示
                if(data.state == "200"){
                  layer.msg(data.message, {icon:1});
                  photoVue.commForm.isAdmin = 1; //修改身份为副博主
                }else{
                  layer.msg(data.message, {icon:2});
                  $("#isFuAdminSwitch").removeAttr("checked"); //验证失败去除勾选
                  photoVue.commForm.isAdmin = 0; //修改身份为游客
                }
                form.render();
              },
              error: function(error){
                layer.close(loadIndex); //关闭加载提示
                layer.msg(error, {icon:2});
                $("#isFuAdminSwitch").removeAttr("checked"); //验证失败去除勾选
                photoVue.commForm.isAdmin = 0; //修改身份为游客
                form.render();
              }
            })
          },
          btn2: function(index, layero){
            layer.close(index);
            $("#isFuAdminSwitch").removeAttr("checked"); //验证失败去除勾选
            photoVue.commForm.isAdmin = 0; //修改身份为游客
            form.render();
          },
          cancel: function(index, layero){
            layer.close(index);
            $("#isFuAdminSwitch").removeAttr("checked"); //验证失败去除勾选
            photoVue.commForm.isAdmin = 0; //修改身份为游客
            form.render();
          }
        });
      }else{
        photoVue.commForm.isAdmin = 0; //修改身份为游客
        form.render();
      }
    });
  });

  $(function(){
    // 评论插件：绑定表情
    $('.face-icon').SinaEmotion($('.text'));
  });

  var photoVue = new Vue({
    el: '#photoVue',
    data: function () {
      return {
        serverUrl: 'http://blog-my.com', //服务器地址（临时开发用）
        albumId: '[[${albumId}]]',
        isLoad_1: false, //请求1完成标记
        isLoad_2: false, //请求2完成标记
        isLoad_3: false, //请求3完成标记
        sysMenuList: [], //导航
        logoTitle: [], //LOGO标题
        indexFooter: [], //页脚
        photoAlbum: [], //相册
        photoList: [], //照片
        commList: [], //留言列表
        referCount: 0, //留言回复总数
        count: 0, //留言总数
        curr: 1, //留言页数
        limit: 10, //留言每页条数
        p_count: 0, //照片总数
        p_curr: 1, //照片页数
        p_limit: 8, //照片每页条数
        commForm: {
          serviceId: '',
          classify: 1,
          content: '',
          userName: '',
          headPhoto: '',
          parentId: '',
          byUserName: '',
          referContent: '',
          type: 0,
          isAdmin: 0
        }
      }
    },
    created: function () {
      const me = this;
      me.$nextTick(function () {
        me.updateReadNum();
        me.getMyAlbumData();
        me.getPhotoList(me.p_curr, me.p_limit);
        me.getCommList(me.curr, me.limit);
      });
    },
    methods: {
      //初始化基本信息
      getMyAlbumData: function(){
        const me = this;
        $.ajax({
          type: 'POST',
          url: '/myAlbum/getMyAlbumData',
          data: {},
          dataType: 'JSON',
          success: function(data){
            if(data.state == "200"){
              me.sysMenuList = data.sysMenuList;
              me.logoTitle = data.logoTitle;
              me.indexFooter = data.indexFooter;
            }else{
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(data.message, {icon:2});
              });
            }
            me.isLoad_1 = true;
          },
          error: function(error){
            layui.use('layer', function(){
              var layer = layui.layer;
              layer.msg(error, {icon:2});
            });
          }
        })
      },

      //初始化照片信息
      getPhotoList: function(curr, limit){
        const me = this;
        me.isLoad_3 = false;
        $.ajax({
          type: 'POST',
          url: '/myAlbum/getPhotoList',
          // async:false, //同步
          data: {
            albumId: me.albumId,
            page: curr,
            limit: limit
          },
          dataType: 'JSON',
          success: function(data){
            if(data.state == "200"){
              me.photoList = data.photoList;
              me.photoAlbum = data.photoAlbum;
              me.p_count = data.count;

              //初始化照片指向的下标
              $(".initPhotoIndex").text(1);
              $("#pic1").attr("curindex", 0);

              setTimeout(function(){ //1秒后初始化照片预览
                picShowFun();
              }, 1000);

              me.initPhotoPage(); //初始化分页

              me.isLoad_3 = true;

            }else{
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(data.message, {icon:2});
              });
            }
          },
          error: function(error){
            layui.use('layer', function(){
              var layer = layui.layer;
              layer.msg(error, {icon:2});
            });
          }
        })
      },

      //相册点赞
      clickPraise: function(){
        const me = this;
        var url = '/myAlbum/updatePraiseNum';
        $.ajax({
          type: 'POST',
          url: url,
          data: {
            id: me.albumId
          },
          dataType: 'JSON',
          success: function(data){
            if(data.state == "200"){
              me.photoAlbum.praiseNum  = me.photoAlbum.praiseNum + 1;
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(data.message, {icon:1});
              });
            }else{
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(data.message, {icon:2});
              });
            }
          },
          error: function(error){
            layui.use('layer', function(){
              var layer = layui.layer;
              layer.msg(error, {icon:2});
            });
          }
        })
      },

      //阅读数量加+1
      updateReadNum: function(){
        const me = this;
        var url = '/myAlbum/updateReadNum';
        $.ajax({
          type: 'POST',
          url: url,
          data: {
            id: me.albumId
          },
          dataType: 'JSON',
          success: function(data){
            if(data.state == "200"){

            }else{
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(data.message, {icon:2});
              });
            }
          },
          error: function(error){
            layui.use('layer', function(){
              var layer = layui.layer;
              layer.msg(error, {icon:2});
            });
          }
        })
      },

      //初始化评论列表信息
      getCommList: function(curr, limit){
        const me = this;
        me.isLoad_2 = false;

        var url = '/myAlbum/getCommList';
        $.ajax({
          type: 'POST',
          url: url,
          data: {
            id: me.albumId,
            page: curr,
            limit: limit
          },
          dataType: 'JSON',
          success: function(data){
            if(data.state == "200"){
              me.commList = data.commList;
              me.count = data.count;
              me.referCount = data.referCount;

              //使用Vue评论表情不能格式化，没有刷新vue的值，只
              // 能这样改变值再还原才能初始化成功（咱也不知道为什么会这样）
              setTimeout(function(){
                me.commForm.content = " ";
                me.commForm.content = "";
              }, 2000);

              me.initPage(); //初始化分页

              me.isLoad_2 = true;
            }else{
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(data.message, {icon:2});
              });
            }
          },
          error: function(error){
            layui.use('layer', function(){
              var layer = layui.layer;
              layer.msg(error, {icon:2});
            });
          }
        })
      },

      //评论点赞
      commPraise: function(id){
        const me = this;
        var url = '/myAlbum/commPraise';
        $.ajax({
          type: 'POST',
          url: url,
          data: {
            id: id
          },
          dataType: 'JSON',
          success: function(data){
            if(data.state == "200"){
              me.getCommList(me.curr, me.limit);
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(data.message, {icon:1});
              });
            }else{
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(data.message, {icon:2});
              });
            }
          },
          error: function(error){
            layui.use('layer', function(){
              var layer = layui.layer;
              layer.msg(error, {icon:2});
            });
          }
        })
      },

      //发布评论
      submitComment: function(){
        const me = this;
        me.commForm.content = $("#pl-comment").val();
        if(me.commForm.content == "" || me.commForm.content == null || me.commForm.content == undefined){
          layui.use('layer', function(){
            var layer = layui.layer;
            layer.msg("请输入内容>_<", {icon:2});
          });
          return;
        }
        if(me.commForm.content.length > 500){
          layui.use('layer', function(){
            var layer = layui.layer;
            layer.msg("内容不能超过500字>_<", {icon:2});
          });
          return;
        }
        if(me.commForm.userName.length > 10){
          layui.use('layer', function(){
            var layer = layui.layer;
            layer.msg("昵称不能超过10个字>_<", {icon:2});
          });
          return;
        }

        //根据格式判断是否为回复（内容格式：@原评论者昵称:空格）
        var contentStr = me.commForm.content.split("@" + me.commForm.byUserName + ": ");
        if(contentStr.length < 2){ //不是回复
          me.commForm.type = 0; //类型为评论
          me.commForm.parentId = "" ;//父级id为空
          me.commForm.byUserName = ""; //回复者昵称为空
          me.commForm.referContent = ""; //引用的内容为空
        }else{ //是回复
          me.commForm.content = me.commForm.content.replace("@" + me.commForm.byUserName + ": ", ""); //还原内容
          //昵称互换
          var username = me.commForm.userName;
          me.commForm.userName = me.commForm.byUserName;
          me.commForm.byUserName = username;
        }

        me.commForm.serviceId = me.albumId; //业务id

        //判断是否为博主或副博主
        if(me.commForm.isAdmin == 1){
          me.commForm.headPhoto = 'favatar.jpg'; //头像
          if(contentStr.length < 2){ //不是回复
            me.commForm.userName = "副博主";
          }else{
            me.commForm.byUserName = "副博主";
          }
        }else if(me.commForm.isAdmin == 2){
          me.commForm.headPhoto = 'avatar.jpg'; //头像
          if(contentStr.length < 2){ //不是回复
            me.commForm.userName = "博主";
          }else{
            me.commForm.byUserName = "博主";
          }
        }else{
          me.commForm.headPhoto = 'comm_head' + me.random(1, 31) + '.jpg'; //头像
        }

        var loadIndex = layer.load(2); //加载提示
        var url = '/myAlbum/addComment';
        $.ajax({
          type: 'POST',
          url: url,
          data: me.commForm,
          dataType: 'JSON',
          success: function(data){
            if(data.state == "200"){
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.close(loadIndex); //关闭加载提示
                layer.msg(data.message, {icon:1});
              });
              //初始化表单
              me.commForm.content = ""; //清空内容
              me.commForm.type = 0; //类型为评论
              me.commForm.parentId = "" ; //父级id为空
              me.commForm.userName = ""; //评论者昵称为空
              me.commForm.byUserName = ""; //回复者昵称为空
              me.commForm.referContent = ""; //引用的内容为空
              me.getCommList(me.curr, me.limit);
            }else{
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.close(loadIndex); //关闭加载提示
                layer.msg(data.message, {icon:2});
              });
            }
          },
          error: function(error){
            layui.use('layer', function(){
              var layer = layui.layer;
              layer.close(loadIndex); //关闭加载提示
              layer.msg(error, {icon:2});
            });
          }
        })
      },

      //点击回复
      reply: function(parentId, userName, referContent){
        const me = this;
        me.commForm.parentId = parentId; //父级id
        me.commForm.byUserName = userName; //原评论者昵称暂时保存到评论者昵称中，提交表单时进行交换
        me.commForm.referContent = referContent; //引用的内容
        me.commForm.type = 1; //类型为回复
        me.commForm.content = "@" + userName + ": "; //内容格式：@原评论者昵称:空格
      },

      //生成min－max的随机数(不包max)
      random: function(min, max) {
        var num = Math.floor(Math.random() * (max - min)) + min;
        var numstr = num < 10? '0' + num : num;
        return numstr;
      },

      //格式化评论内容
      analyticEmotion: function(content){
        return AnalyticEmotion(content);
      },

      //获取楼层（分页叠加）
      getIndex: function(index){
        const me = this;
        var num = me.curr * me.limit + (index + 1 - me.limit);
        return num;
      },

      //时间计算：多少分钟前……
      timeago: function(hisTime){
        var now = new Date().getTime(),
                diffValue = now - new Date(hisTime).getTime(),
                result='',
                minute = 1000 * 60,
                hour = minute * 60,
                day = hour * 24,
                halfamonth = day * 15,
                month = day * 30,
                year = month * 12,

                _year = diffValue / year,
                _month = diffValue / month,
                _halfamonth = diffValue / halfamonth,
                _week = diffValue / (7 * day),
                _day = diffValue / day,
                _hour = diffValue / hour,
                _min = diffValue / minute;

        if(_year >= 1) result = parseInt(_year) + "年前";
        else if(_month >= 1) result = parseInt(_month) + "个月前";
        else if(_halfamonth >= 1) result = "半个月前";
        else if(_week >= 1) result = parseInt(_week) + "周前";
        else if(_day >= 1) result = parseInt(_day) + "天前";
        else if(_hour >= 1) result = parseInt(_hour) + "个小时前";
        else if(_min >= 1) result = parseInt(_min) + "分钟前";
        else result = "刚刚";
        return result;
      },

      //留言分页
      initPage: function(){
        const me = this;
        layui.use('laypage', function(){
          var laypage = layui.laypage;
          //执行一个laypage实例
          laypage.render({
            elem: 'pageContent' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: me.count //数据总数，从服务端得到
            ,limit: me.limit //每页条数
            ,curr: me.curr //页数
            // ,limits: [10, 20, 30, 40, 50] //每页条数的选择项
            ,layout: ['prev', 'page', 'next', 'count'] //自定义排版
            ,jump: function(obj, first){ //obj包含了当前分页的所有参数
              //首次不执行
              if(!first){
                me.curr = obj.curr;
                me.getCommList(obj.curr, obj.limit);
              }
            }
          });
        });
      },

      //照片分页
      initPhotoPage: function(){
        const me = this;
        layui.use('laypage', function(){
          var laypage = layui.laypage;
          //执行一个laypage实例
          laypage.render({
            elem: 'photoPageContent' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: me.p_count //数据总数，从服务端得到
            ,limit: me.p_limit //每页条数
            ,curr: me.p_curr //页数
            // ,limits: [10, 20, 30, 40, 50] //每页条数的选择项
            ,layout: ['prev', 'page', 'next', 'count'] //自定义排版
            ,jump: function(obj, first){ //obj包含了当前分页的所有参数
              //首次不执行
              if(!first){
                me.p_curr = obj.curr;
                me.getPhotoList(obj.curr, obj.limit);
              }
            }
          });
        });
      }
    }
  });

</script>
</html>
